<template>
    <div id="wrapper">
		<el-row style="margin-bottom:20px">
            <el-row :gutter="30">
                <el-col :xs="24" :sm="24" :lg="6">
                    <info_label
                        :type="common.type4"
                        title="构建"
                        :num="String(labelsData.build)"
                        :sub="common.subs[0]"
                        :to_sub="common.to_sub"
                        :cls="common.success"
                    ></info_label>
                </el-col>
            </el-row>
			<el-tabs type="border-card" v-model="activeName" style="margin-bottom:20px">
				<el-tab-pane label="Daily-build" name="0">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="common.titles[0]"
								:num="String(labelsData.daily_build)"
								:sub="common.subs[0]"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'日构建'"
								:num="String(labelsData.daily_day_av_build)"
								:sub="common.subs[0]"
								:to_sub="common.avg"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'月构建'"
								:num="String(labelsData.daily_month_av_build)"
								:sub="common.subs[0]"
								:to_sub="common.avg"
								:cls="common.success"
							></info_label>
						</el-col>
						<!-- :nessary="true"
								:conditionData="'目标值<'+formatSeconds(kpi.avg_daily_queue_time)" -->
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.waitD"
								:label_data="formatSeconds(labelsData.daily_av_queue_time)"
								:label_import="'small'"
								:label_avg="standardKPI.avg_daily_duration"
								:label_now="labelsData.daily_av_queue_time"
								:label_good="kpi.avg_daily_duration"
								:label_precent="'time'"
								:nessary="true">
							</LabelGrid>
						</el-col>
					</el-row>
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.buildD"
								:label_data="formatSeconds(labelsData.daily_av_duration)"
								:label_import="'small'"
								:label_avg="standardKPI.avg_daily_queue_time"
								:label_now="labelsData.daily_av_duration"
								:label_good="kpi.avg_daily_queue_time"
								:label_precent="'time'"
								:nessary="true">
							</LabelGrid>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.succD"
								:label_data="labelsData.daily_success_rate?(labelsData.daily_success_rate*100).toFixed(2):'0.00'"
								:label_import="'big'"
								:label_avg="standardKPI.avg_daily_success_rate"
								:label_now="labelsData.daily_success_rate"
								:label_good="kpi.avg_daily_success_rate"
								:label_precent="'precent'"
								:nessary="true">
								</LabelGrid>
						</el-col>
					</el-row>
					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建时长排名</span>
						</div>
						<div>
							<ve-bar :data="topChartData1" :settings="chartSettings" ref="bline0" :extend="topExtend"></ve-bar>
						</div>
				</el-card>
				<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建时长趋势</span>
						</div>
						<div>
							<ve-line
								:data="buildChartData3"
								ref="lline0"
								:settings="buildChartSettings"
								:data-empty="dataEmpty"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
				</el-card>
				<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建频率趋势</span>
						</div>
						<div>
							<ve-line
								:data="buildRate1"
								ref="pline0"
								:settings="buildChartSettings"
								:data-empty="dataEmpty"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
				</el-card>
				</el-tab-pane>
				<!-- <el-tab-pane label="Submit-build">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type"
								:title="common.titles[0]"
								:num="String(labelsData.submit_build)"
								:sub="common.subs[0]"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type"
								:title="'日构建'"
								:num="String(labelsData.submit_day_av_build)"
								:sub="common.subs[0]"
								:to_sub="common.avg + '(目标>=1)'"
								:cls="common.danger"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type"
								:title="'月构建'"
								:num="String(labelsData.submit_month_av_build)"
								:sub="common.subs[0]"
								:to_sub="common.avg + '(目标>=1)'"
								:cls="common.danger"
							></info_label>
						</el-col>
					</el-row>
				</el-tab-pane> -->
				<el-tab-pane label="Verify-build" name="1">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="common.titles[0]"
								:num="String(labelsData.verify_build)"
								:sub="common.subs[0]"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'日构建'"
								:num="String(labelsData.verify_day_av_build)"
								:sub="common.subs[0]"
								:to_sub="common.avg"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'月构建'"
								:num="String(labelsData.verify_month_av_build)"
								:sub="common.subs[0]"
								:to_sub="common.avg"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.buildV"
								:label_data="formatSeconds(labelsData.verify_av_duration)"
								:label_import="'small'"
								:label_avg="standardKPI.avg_verify_duration"
								:label_now="labelsData.verify_av_duration"
								:label_good="kpi.avg_verify_duration"
								:label_precent="'time'"
								:nessary="true">
							</LabelGrid>
						</el-col>
					</el-row>
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.waitV"
								:label_data="formatSeconds(labelsData.verify_av_queue_time)"
								:label_import="'small'"
								:label_avg="standardKPI.avg_verify_queue_time"
								:label_now="labelsData.verify_av_queue_time"
								:label_good="kpi.avg_verify_queue_time"
								:label_precent="'time'"
								:nessary="true">
								</LabelGrid>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.succD"
								:label_data="labelsData.verify_success_rate?(labelsData.verify_success_rate*100).toFixed(2):'0.00'"
								:label_import="'big'"
								:label_avg="standardKPI.avg_verify_success_rate"
								:label_now="labelsData.verify_success_rate"
								:label_good="kpi.avg_verify_success_rate"
								:label_precent="'precent'"
								:nessary="true">
								</LabelGrid>
						</el-col>
					</el-row>
					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建时长排名</span>
						</div>
						<div>
							<ve-bar :data="topChartData3" :settings="chartSettings" ref="bline1" :extend="topExtend"></ve-bar>
						</div>
				</el-card>
				<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建时长趋势</span>
						</div>
						<div>
							<ve-line
								:data="buildChartData2"
								ref="lline1"
								:settings="buildChartSettings"
								:data-empty="dataEmpty"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
				</el-card>
				<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建频率趋势</span>
						</div>
						<div>
							<ve-line
								:data="buildRate2"
								ref="pline1"
								:settings="buildChartSettings"
								:data-empty="dataEmpty"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
				</el-card>
				</el-tab-pane>
				<el-tab-pane label="Release-build" name="2">
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type4"
								:title="common.titles[0]"
								:num="String(labelsData.release_build)"
								:sub="common.subs[0]"
								:to_sub="common.to_sub"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'日构建'"
								:num="String(labelsData.release_day_av_build)"
								:sub="common.subs[0]"
								:to_sub="common.avg"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<info_label
								:type="common.type5"
								:title="'月构建'"
								:num="String(labelsData.release_month_av_build)"
								:sub="common.subs[0]"
								:to_sub="common.avg"
								:cls="common.success"
							></info_label>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.buildR"
								:label_data="formatSeconds(labelsData.release_av_duration)"
								:label_import="'small'"
								:label_avg="standardKPI.avg_release_duration"
								:label_now="labelsData.release_av_duration"
								:label_good="kpi.avg_release_duration"
								:label_precent="'time'"
								:nessary="true">
								</LabelGrid>
						</el-col>
					</el-row>
					<el-row :gutter="30">
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.waitR"
								:label_data="formatSeconds(labelsData.release_av_queue_time)"
								:label_import="'small'"
								:label_avg="standardKPI.avg_release_queue_time"
								:label_now="labelsData.release_av_queue_time"
								:label_good="kpi.avg_release_queue_time"
								:label_precent="'time'"
								:nessary="true">
								</LabelGrid>
						</el-col>
						<el-col :xs="24" :sm="24" :lg="6">
							<LabelGrid
								:label_info="deptlableinfo.succD"
								:label_data="labelsData.release_success_rate?(labelsData.release_success_rate*100).toFixed(2):'0.00'"
								:label_import="'big'"
								:label_avg="standardKPI.avg_release_success_rate"
								:label_now="labelsData.release_success_rate"
								:label_good="kpi.avg_release_success_rate"
								:label_precent="'precent'"
								:nessary="true">
								</LabelGrid>
						</el-col>
					</el-row>
					<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建时长排名</span>
						</div>
						<div>
							<ve-bar :data="topChartData2" :settings="chartSettings" ref="bline2" :extend="topExtend"></ve-bar>
						</div>
				</el-card>
				<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建时长趋势</span>
						</div>
						<div>
							<ve-line
								:data="buildChartData4"
								ref="lline2"
								:settings="buildChartSettings"
								:data-empty="dataEmpty"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
				</el-card>
				<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
						<div slot="header" class="clearfix">
							<span>构建频率趋势</span>
						</div>
						<div>
							<ve-line
								:data="buildRate3"
								ref="pline2"
								:settings="buildChartSettings"
								:data-empty="dataEmpty"
								:data-zoom="dataZoom"
							></ve-line>
						</div>
				</el-card>
				</el-tab-pane>
			</el-tabs>
		</el-row>
		<!-- <el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>Top10项目(平均构建时长)</span>
			</div>
			<div>
				<ve-bar :data="topChartData" :settings="chartSettings" :extend="topExtend"></ve-bar>
			</div>
		</el-card> -->

		<!-- <el-tabs class="bgcolor" type="border-card">
			<el-tab-pane label="Verify-build" name="0">
				<ve-bar :data="topChartData3" :settings="chartSettings" ref="bline0" :extend="topExtend"></ve-bar>
			</el-tab-pane>
			<el-tab-pane label="Daily-build" name="1">
				<ve-bar :data="topChartData1" :settings="chartSettings" ref="bline1" :extend="topExtend"></ve-bar>
			</el-tab-pane>
			<el-tab-pane label="Release-build" name="2">
				<ve-bar :data="topChartData2" :settings="chartSettings" ref="bline2" :extend="topExtend"></ve-bar>
			</el-tab-pane>
		</el-tabs> -->

		<!-- <el-tabs v-model="activeName2" class="bgcolor marT" type="border-card">
			<el-tab-pane label="Verify-build" name="0">
				<ve-line
					:data="buildChartData2"
					ref="vline0"
					:settings="buildChartSettings"
					:data-empty="dataEmpty"
					:data-zoom="dataZoom"
				></ve-line>
			</el-tab-pane>
			<el-tab-pane label="Daily-build" name="1">
				<ve-line
					:data="buildChartData3"
					ref="vline1"
					:settings="buildChartSettings"
					:data-empty="dataEmpty"
					:data-zoom="dataZoom"
				></ve-line>
			</el-tab-pane>
			<el-tab-pane label="Release-build" name="2">
				<ve-line
					:data="buildChartData4"
					ref="vline2"
					:settings="buildChartSettings"
					:data-empty="dataEmpty"
					:data-zoom="dataZoom"
				></ve-line>
			</el-tab-pane>
		</el-tabs> -->

        <!-- <el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>构建效率趋势(平均时长)</span>
			</div>
			<div>
				<ve-line
					:data="buildChartData"
					:settings="buildChartSettings"
					:data-empty="dataEmpty"
					:data-zoom="dataZoom"
				></ve-line>
			</div>
        </el-card> -->
		<el-card class="box-card m-b marT" shadow="never">
			<div slot="header" class="clearfix">
				<span>项目列表</span>
			</div>
			<div>
				<el-table
					:data="currentData"
					:header-cell-style="{background:'#eef1f6'}"
					style="width: 100%; margin-bottom: 20px"
					@sort-change="sortChange">
					<el-table-column prop="project_name" label="项目名" :sortable="'custom'"></el-table-column>
					<el-table-column prop="verify_build" label="构建次数(Verify-build)" sortable></el-table-column>
					<!-- <el-table-column prop="submit_av_duration" label="Submit平均构建时长" sortable></el-table-column> -->
          			<el-table-column prop="verify_av_duration" label="平均构建时长(Verify-build)" sortable></el-table-column>
					<el-table-column prop="daily_build" label="构建次数(Daily-build)" sortable></el-table-column>
					<el-table-column prop="daily_av_duration" label="平均构建时长(Daily-build)" sortable></el-table-column>
					<el-table-column prop="release_build" label="构建次数(Release-build)" sortable></el-table-column>
					<el-table-column prop="release_av_duration" label="平均构建时长(Release-build)" sortable></el-table-column>
				</el-table>
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 15, 50, 100]"
					:page-size="currentSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataCount">
				</el-pagination>
			</div>
		</el-card>
    </div>
</template>

<script>
import { pagingData } from './utils.js';
import { getKpi } from '@/api/kpi'
import common from '@/components/devops/get_data';
import LabelGrid from '@/components/qa/Label.vue'
import { mapState } from 'vuex'
import info_label from '@/components/devops/info_label.vue';
import { getHeader } from '@/app.config';
import 'v-charts/lib/style.css';
import 'echarts/lib/component/dataZoom';
export default {
	props: {
        params: Object
	},
	computed: {
		...mapState({
        standardKPI: state => state.standardKPI
    })
	},
	components: {
		info_label,
		LabelGrid
    },
    data () {
        this.dataZoom = [{
			type: 'slider',
			start: 0,
			end: 100
	    }];
        return {
			common,
			deptlableinfo: {
				succD: {
					label_hname: '构建成功率',
					label_header: 'Avg',
					label_sname: '平均',
					label_unit: '(%)',
					label_class: 'success',
				},
				waitD: {
					label_hname: '构建等待时长',
					label_header: 'Avg',
					label_sname: '平均',
					label_unit: '(时长)',
					label_class: 'danger',
				},
				waitV: {
					label_hname: '构建等待时长',
					label_header: 'Avg',
					label_sname: '平均',
					label_unit: '(时长)',
					label_class: 'danger',
				},
				waitR: {
					label_hname: '构建等待时长',
					label_header: 'Avg',
					label_sname: '平均',
					label_unit: '(时长)',
					label_class: 'danger',
				},
				buildD: {
					label_hname: '构建时长',
					label_header: 'Avg',
					label_sname: '平均',
					label_unit: '(时长)',
					label_class: 'danger',
				},
				buildV: {
					label_hname: '构建时长',
					label_header: 'Avg',
					label_sname: '平均',
					label_unit: '(时长)',
					label_class: 'danger',
				},
				buildR: {
					label_hname: '构建时长',
					label_header: 'Avg',
					label_sname: '平均',
					label_unit: '(时长)',
					label_class: 'danger',
				}
			},
			labelsData: {},
			kpi: {},
			currentPage: 1,
			currentSize: 10,
			activeName: '0',
			activeName2: '0',
            currentData: [],
            tableData: [],
            dataCount: 0,
            dataEmpty: true,
            topChartData1: {
                columns: ['project', 'avg_duration'],
                rows: []
						},
						topChartData2: {
                columns: ['project', 'avg_duration'],
                rows: []
						},
						topChartData3: {
                columns: ['project', 'avg_duration'],
                rows: []
            },
            topExtend: {
                 series: {
                    barMaxWidth: 50,
                },
						},
            chartSettings: {
							labelMap: {
								avg_duration: '平均构建时长(秒)'
							}
			},
			// chartSettings2: {
			// 				labelMap: {
			// 					avg_duration: '平均构建时长'
			// 				}
			// },
			// chartSettings3: {
			// 				labelMap: {
			// 					avg_duration: '平均构建时长'
			// 				}
			// },
			buildChartData1: {
				columns: [
					'update_date',
					'av_duration'
				],
				rows: []
			},
			buildChartData2: {
				columns: [
					'update_date',
					'verify_av_duration',
				],
				rows: []
			},
			buildChartData3: {
				columns: [
					'update_date',
					'daily_av_duration'
				],
				rows: []
			},
			buildChartData4: {
				columns: [
					'update_date',
					'release_av_duration'
				],
				rows: []
			},
			buildRate1: {
				columns: [
					'update_date',
					'daily_build'
				],
				rows: []
			},
			buildRate2: {
				columns: [
					'update_date',
					'verify_build'
				],
				rows: []
			},
			buildRate3: {
				columns: [
					'update_date',
					'release_build'
				],
				rows: []
			},
			buildChartSettings: {
				labelMap: {
					submit_av_duration: '平均构建时长(秒)',
					verify_av_duration: '平均构建时长(秒)',
					daily_av_duration: '平均构建时长(秒)',
					release_av_duration: '平均构建时长(秒)',
					daily_build: '构建频率次数(次)',
					verify_build: '构建频率次数(次)',
					release_build: '构建频率次数(次)'
				}
			}
        }
	},
	methods: {
		getLabelKpi(type) {
			getKpi(type).then(res => {
				if (res.status == 200) {
						if (res.data.code === 200) {
							this.kpi = res.data.data
						}
				}
			})
		},
		getFix(data) {
				if (null == data || "undefined" == typeof(data) || "" == data) {
						return 0;
				} else {
						return data
				}
		},
		init_datas: function(departmentId, dates) {
			this.get_compare_data(departmentId, dates);
			this.get_summary(departmentId, dates);
			this.getranking(departmentId, dates)
			this.get_daily_data(departmentId, dates)
			this.getLabelKpi('Build')
        },
        formatSeconds(value) {
			if (isNaN(value)) {
				value = 0;
			}
			var theTime = parseInt(value); // 秒
			var theTime1 = 0; // 分
			var theTime2 = 0; // 小时
			var theTime3 = 0; // 天
			if (theTime > 60) {
				theTime1 = parseInt(theTime / 60);
				theTime = parseInt(theTime % 60);
				if (theTime1 > 60) {
					theTime2 = parseInt(theTime1 / 60);
					theTime1 = parseInt(theTime1 % 60);
					if (theTime2 > 24) {
						theTime3 = parseInt(theTime2 / 24);
						theTime2 = parseInt(theTime2 % 24);
					}
				}
			}
			var result = '' + parseInt(theTime) + '秒';
			if (theTime1 > 0) {
				result = '' + parseInt(theTime1) + '分' + result;
			}
			if (theTime2 > 0) {
				result = '' + parseInt(theTime2) + '时' + result;
			}
			if (theTime3 > 0) {
				result = '' + parseInt(theTime3) + '天' + result;
			}
			return result;
        },
        sortChange: function(val) {
			var key = val['prop'];
			var compare1 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return -1;
				} else if (val1 > val2) {
					return 1;
				} else {
					return 0;
				}
			};
			var compare2 = function(obj1, obj2) {
				var val1 = obj1[key];
				var val2 = obj2[key];
				if (val1 < val2) {
					return 1;
				} else if (val1 > val2) {
					return -1;
				} else {
					return 0;
				}
			};
			var arr = this.tableData;
			if (val['order'] === 'ascending') {
				this.currentData = pagingData(arr.sort(compare1), this.dataCount, this.currentPage, this.currentSize);
			} else if (val['order'] === 'descending') {
				this.currentData = pagingData(arr.sort(compare2), this.dataCount, this.currentPage, this.currentSize);
			} else {
				key = 'update_date';
				this.currentData = pagingData(arr.sort(compare2), this.dataCount, this.currentPage, this.currentSize);
			}
		},
		handleSizeChange: function(size) {
			this.currentSize = size;
			this.currentData = pagingData(this.tableData, this.dataCount, this.currentPage, this.currentSize)
		},
		handleCurrentChange: function(page) {
			this.currentPage = page;
			this.currentData = pagingData(this.tableData, this.dataCount, this.currentPage, this.currentSize)
		},
		get_compare_data(departmentId, dates) {
			this.currentData = [];
			this.tableData = [];
			this.dataEmpty = true;
			var self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/dept/compare?departmentId=' +
                departmentId + '&date=' + dates + '&page=build',
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							for (var i = 0; i < data.length; i++) {
								var tableDict = {
                                    project_name: data[i]['project'],
                                    av_duration: self.formatSeconds(data[i]['av_duration']),
									submit_av_duration: self.formatSeconds(data[i]['submit_av_duration']),
									verify_av_duration: self.formatSeconds(data[i]['verify_av_duration']),
									daily_av_duration: self.formatSeconds(data[i]['daily_av_duration']),
									release_av_duration: self.formatSeconds(data[i]['release_av_duration']),
									verify_build: data[i]['verify_build'],
									daily_build: data[i]['daily_build'],
									release_build: data[i]['release_build']
								};
								self.tableData.push(tableDict);
							};
							self.dataCount = self.tableData.length;
							self.currentPage = 1;
							self.currentSize = 10;
							self.dataEmpty = false;
							if (self.dataCount === 0) {
								self.currentData = [];
								self.dataEmpty = true;
							} else {
								self.currentData = pagingData(self.tableData, self.dataCount, self.currentPage, self.currentSize)
							}
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		},
		getranking(departmentId, dates) {
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/dept/build/ranking?departmentId=' +
                departmentId + '&date=' + dates,
				{headers: getHeader()})
				.then(res => {
					console.log(res)
					if(res.data.code === 200) {
						this.topChartData1.rows = res.data.daily_build.reverse()
						this.topChartData2.rows = res.data.release_build.reverse()
						this.topChartData3.rows = res.data.verify_build.reverse()
					}
				}).catch(function(err) {
					console.log(err);
				})
		},
		get_daily_data(departmentId, dates) {
			var _self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/dept/daily/summary?departmentId=' +
                departmentId + '&date=' + dates + '&page=build',
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							_self.buildChartData1.rows = data
							_self.buildChartData2.rows = data
							_self.buildChartData3.rows = data
							_self.buildChartData4.rows = data

							_self.buildRate1.rows = data
							_self.buildRate2.rows = data
							_self.buildRate3.rows = data

						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		},
		get_summary(departmentId, dates) {
			var _self = this
			this.$axios.get(process.env.VUE_APP_KANBAN_HOST +
                '/api/devops/dept/summary?departmentId=' +
                departmentId + '&date=' + dates + '&page=build',
				{headers: getHeader()})
				.then(function(response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							var data = response.data.data;
							_self.labelsData = data
						}
					}
				})
				.catch(function(err) {
					console.log(err);
				});
		}
	},
	watch: {
        params: {
			handler: function(val) {
                const departmentId = val.departmentId === 'undefined' ? '' : val.departmentId;
                const dates = val.time === 'undefined' ? '' : val.time;
				this.init_datas(departmentId, dates);
			},
			deep: true
		},
		activeName(v) {
      this.$nextTick(() => {
				this.$refs[`bline${v}`].echarts.resize()
				this.$refs[`lline${v}`].echarts.resize()
				this.$refs[`pline${v}`].echarts.resize()
			})
		},
		activeName2(v) {
      this.$nextTick(() => {
				this.$refs[`vline${v}`].echarts.resize()
			})
    }
	},
	mounted() {
        const departmentId = this.params.departmentId === 'undefined' ? '' : this.params.departmentId;
        const dates = this.params.time === 'undefined' ? '' : this.params.time;
		this.init_datas(departmentId, dates);
	}
}
</script>

<style lang="scss" scoped>
	#wrapper .bgcolor{
		background: #fff;
	}
	.marT{
		margin-top: 20px;
	}
</style>
